<template>
	<view class="ranking">
		<view class="ranking-left">
			<image class="ranking-icon" src="/static/images/master/service/home.png"></image>
			<text>{{ name }}</text>
		</view>
		<view v-if="false" class="ranking-right">安心服务证榜第{{ ranking }}名</view>
	</view>
</template>

<script lang="ts" setup>
	defineProps({
		name: {
			type: String,
			default: '',
		},
		ranking: {
			type: Number,
			default: 0,
		},
	});
</script>

<style lang="scss" scoped>
	.ranking {
		height: 36rpx;
		line-height: 36rpx;
		display: flex;
		font-weight: 400;
		font-size: 24rpx;
		border-radius: 50rpx;
		overflow: hidden;
		text-align: center;
		.ranking-icon {
			width: 38rpx;
			height: 36rpx;
		}
		.ranking-left {
			min-width: 160rpx;
			display: flex;
			background: #F4F5F8;
			color: #242424;
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			padding-right: 4rpx;
			text {
				flex: 1;
				padding: 0 13rpx;
			}
		}
		.ranking-right {
			background: #FFF3E3;
			color: #6D461B;
			padding: 0 13rpx;
		}
	}
</style>